<template>
  <div class="order-appointment">
    <!-- 筛选表单 -->
    <el-form :inline="true" :model="searchForm" class="filter-form">
      <el-form-item label="订单号">
        <el-input v-model="searchForm.orderNo" placeholder="请输入订单号" size="small" />
      </el-form-item>
      <el-form-item label="就诊人">
        <el-input v-model="searchForm.patientName" placeholder="请输入就诊人" size="small" />
      </el-form-item>
      <el-form-item label="就诊人身份证">
        <el-input v-model="searchForm.patientIdCard" placeholder="请输入身份证" size="small" />
      </el-form-item>
      <el-form-item label="科室">
        <el-select v-model="searchForm.department" placeholder="请选择" size="small">
          <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="医生名称">
        <el-select v-model="searchForm.doctor" placeholder="请选择" size="small">
          <el-option v-for="item in doctorList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="就诊码">
        <el-input v-model="searchForm.visitCode" placeholder="请输入就诊码" size="small" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择" size="small">
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="就诊时间">
        <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="fetchData">查询</el-button>
        <el-button size="small" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 订单表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="appointmentNo" label="订单号"/>
      <el-table-column prop="serialNumber" label="就诊码"/>
      <el-table-column prop="appointmentDate" label="就诊时间"/>
      <el-table-column prop="week" label="星期"/>
      <el-table-column prop="timeSlot" label="时段"/>
      <el-table-column prop="fee" label="挂号费(元)"/>
      <el-table-column prop="username" label="就诊人"/>
      <el-table-column prop="phone" label="电话"/>
      <el-table-column prop="idCard" label="身份证"/>
      <el-table-column prop="deptName" label="科室"/>
      <el-table-column prop="doctorName" label="医生"/>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status == '0' ? '未到诊' : scope.row.status == '1' ? '已到诊' : '不限'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-link class="action-link" type="primary" @click="handleDetail(scope.row)">到诊</el-link>
          <el-link class="action-link" type="primary" @click="handleRefund(scope.row)">全额退款</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        style="margin-top: 20px; text-align: left;"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import axios from 'axios'

// 页面名称：预约挂号订单
export default {
  name: 'OrderAppointment',
  data() {
    return {
      searchForm: {
        orderNo: '',
        patientName: '',
        patientIdCard: '',
        department: '',
        doctor: '',
        visitCode: '',
        status: '',
        dateRange: []
      },
      departmentList: [
        { label: '科室1', value: 'dept1' },
        { label: '科室2', value: 'dept2' }
      ],
      doctorList: [
        { label: '医生1', value: 'doc1' },
        { label: '医生2', value: 'doc2' }
      ],
      statusList: [
        { label: '未就诊', value: 'not_visited' },
        { label: '已就诊', value: 'visited' }
      ],
      tableData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1
    }
  },
  methods: {
    fetchData() {
      // 构造请求参数
      const params = {
        ...this.searchForm,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      // 处理日期范围
      if (params.dateRange && params.dateRange.length === 2) {
        params.startDate = params.dateRange[0]
        params.endDate = params.dateRange[1]
      }
      delete params.dateRange

      axios.post('/appointments/page', params)
        .then(res => {
          if (res.data && res.data.code === 200) {
            this.tableData = res.data.data.list // 假设PageInfo的list字段为数据
            this.total = res.data.data.total    // 假设PageInfo的total字段为总数
          } else {
            this.$message.error(res.data.message || '查询失败')
          }
        })
        .catch(() => {
          this.$message.error('网络错误')
        })
    },
    resetForm() {
      this.searchForm = {
        orderNo: '',
        patientName: '',
        patientIdCard: '',
        department: '',
        doctor: '',
        visitCode: '',
        status: '',
        dateRange: []
      }
      this.fetchData()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.fetchData()
    },
    handleDetail(row) {
      this.$confirm('确认将该订单标记为已到诊吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/appointments/status', row)
          .then(res => {
            if (res.data && res.data.code === 200) {
              this.$message.success(res.data.msg || '到诊成功')
              this.fetchData()
            } else {
              this.$message.error(res.data.msg || '到诊失败')
            }
          })
          .catch(() => {
            this.$message.error('网络错误')
          })
      }).catch(() => {})
    },
    handleRefund(row) {
      this.$confirm('确认对该订单进行全额退款吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/appointments/fee', row)
          .then(res => {
            if (res.data && res.data.code === 200) {
              this.$message.success(res.data.msg || '退款成功')
              this.fetchData()
            } else {
              this.$message.error(res.data.msg || '退款失败')
            }
          })
          .catch(() => {
            this.$message.error('网络错误')
          })
      }).catch(() => {})
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.order-appointment {
  padding: 20px;
}
.filter-form {
  margin-bottom: 20px;
}
.action-link {
  color: #00a0e9 !important;   /* 蓝色 */
  text-decoration: underline !important; /* 下划线 */
  margin-right: 24px;           /* 两个按钮间距 */
  font-size: 16px;              /* 字体大小可根据实际调整 */
  cursor: pointer;
  padding: 0;
}
.action-link:last-child {
  margin-right: 0;
}
</style>